<template>
  <div>
    <div class="bg-white grid-content">
      <el-form :inline="true" :model="trqForm" class="demo-form-inline">
        <el-form-item label="日期:">
          <el-date-picker
            v-model="searchDate"
            align="right"
            type="date"
            placeholder="请选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <!-- <el-form-item label="日期:">
            <el-date-picker v-model="searchDate" type="daterange" align="right" unlink-panels range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item> -->
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button type="success">下载</el-button>
        </el-form-item>
      </el-form>
      </div>
      <div class="bg-white grid-content">
      <div style="overflow: hidden">
        <div class="mytitle">天然气数据</div>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData">
        <el-table-column align="center" label="日期">
          <template slot-scope="scope">
            {{scope.row.rq}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="各单位日用气量">
          <el-table-column align="center" label="第一采油作业区">
            <el-table-column align="center" v-for="(itemBt,index) in dyzyq" :key="itemBt" :label="itemBt">
              <el-table-column align="center" prop="" label="流量计底数">
                <template slot-scope="scope">
                  {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第一作业区'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第一作业区'&&item.zkmc===itemBt)).lljds:''}}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="kbtyx_ql" label="气量">
                <template slot-scope="scope">
                  {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第一作业区'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第一作业区'&&item.zkmc===itemBt)).ql:''}}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="第二采油作业区">
            <el-table-column align="center" v-for="(itemBt,index) in dezyq" :key="itemBt" :label="itemBt">
              <el-table-column align="center" prop="d18zyz_lljds" label="流量计底数">
                <template slot-scope="scope">
                  {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第二作业区'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第二作业区'&&item.zkmc===itemBt)).lljds:''}}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="d18zyz_ql" label="气量">
                <template slot-scope="scope">
                  {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第二作业区'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第二作业区'&&item.zkmc===itemBt)).ql:''}}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="第三采油作业区">
            <el-table-column align="center" v-for="(itemBt,index) in dszyq" :key="itemBt" :label="itemBt">
              <el-table-column align="center" prop="s101zqz_lljds" label="流量计底数">
                <template slot-scope="scope">
                  {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第三作业区'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第三作业区'&&item.zkmc===itemBt)).lljds:''}}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="s101z1z_ql" label="气量">
                <template slot-scope="scope">
                  {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第三作业区'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第三作业区'&&item.zkmc===itemBt)).ql:''}}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="第四采油作业区">
            <el-table-column align="center" v-for="(itemBt,index) in dsszyq" :key="itemBt" :label="itemBt">
              <el-table-column align="center" prop="zjjrz_lljds" label="流量计底数">
                <template slot-scope="scope">
                  {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第四作业区'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第四作业区'&&item.zkmc===itemBt)).lljds:''}}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="zjjrz_ql" label="气量">
                <template slot-scope="scope">
                  {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第四作业区'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='第四作业区'&&item.zkmc===itemBt)).ql:''}}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="升22">
            <el-table-column align="center" v-for="(itemBt,index) in seezyq" :key="itemBt" :label="itemBt">
              <el-table-column align="center" prop="zjjrz_lljds" label="流量计底数">
                <template slot-scope="scope">
                  {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='升22作业区'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='升22作业区'&&item.zkmc===itemBt)).lljds:''}}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="zjjrz_ql" label="气量">
                <template slot-scope="scope">
                  {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='升22作业区'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='升22作业区'&&item.zkmc===itemBt)).ql:''}}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>

            <el-table-column align="center" label="肇25">
              <el-table-column align="center" v-for="(itemBt,index) in zewzyq" :key="itemBt" :label="itemBt">
                <el-table-column align="center" prop="zjjrz_lljds" label="流量计底数">
                  <template slot-scope="scope">
                    {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='肇25作业区'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='肇25作业区'&&item.zkmc===itemBt)).lljds:''}}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="zjjrz_ql" label="气量">
                  <template slot-scope="scope">
                    {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='肇25作业区'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='肇25作业区'&&item.zkmc===itemBt)).ql:''}}
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table-column>

          <el-table-column align="center" label="后勤分公司">
            <el-table-column align="center" v-for="(itemBt,index) in hqfgszyq" :key="itemBt" :label="itemBt">
              <el-table-column align="center" prop="glf_lljds" label="流量计底数">
                <template slot-scope="scope">
                  {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='后勤分公司'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='后勤分公司'&&item.zkmc===itemBt)).lljds:''}}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="glf_ql" label="气量">
                <template slot-scope="scope">
                  {{scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='后勤分公司'&&item.zkmc===itemBt))?scope.row.list.find(item=>(item.rq===scope.row.rq&&item.zyqmc==='后勤分公司'&&item.zkmc===itemBt)).ql:''}}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" prop="remarks" label="备注"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import trqApi from "@/api/jcsj/scgl/trqsj/trqsj";
import qbApi from "@/api/bbsc/qubao";

export default {
  data() {
    return {
      dyzyq:[],
      dezyq:[],
      dszyq:[],
      dsszyq:[],
      seezyq:[],
      zewzyq:[],
      hqfgszyq:[],
      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      startDate: "",
      endDate: "",
      searchDate: "",
      //  表头数据
      tableHead: [
        { val: "指标11111", item: "target1" },
        { val: "指标2", item: "target2" },
        { val: "指标3", item: "target3" },
        { val: "指标4", item: "target4" },
        { val: "指标5", item: "target5" },
      ],
      // 表格数据
      tableData: [],
      // // table数据总条数
      // tableTotal: 30,
      // // 分页数
      // currentSize: 10,
      // //当前页
      // currentPage: 4
      //数据总条数
      total: 0,
      //当前页码
      pageNo: 1,
      // 分页数
      pageSize: 5,
    };
  },
  created(){
    this.getBiaotou()
  },
  mounted(){

  },
  methods: {
    async getBiaotou(){
      //发送查询请求
      let res = await trqApi.getBiaoTou(
        this.pageNo,
        this.pageSize,
        this.searchDate[0],
        this.searchDate[1]
      );
      //判断是否成功
      if (res.success) {
        //处理表头
        this.dyzyq=res.data.allList[0]
        this.dezyq=res.data.allList[1]
        this.dszyq=res.data.allList[2]
        this.dsszyq=res.data.allList[3]
        this.seezyq=res.data.allList[4]
        this.zewzyq=res.data.allList[5]
        this.hqfgszyq=res.data.allList[6]
        //处理数据
        this.tableData = res.data.page.records;
      }
      this.total = res.data.page.total;
      this.pageSize = res.data.page.size;
    },
  },
}
</script>

<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: large;
  padding-left: 45%;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myTime {
  float: right;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>
